<template>
  <div class="namelist-box">
    <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span class="table-operation">
            <a @click="showModal(record.id)">修改密码</a>
          </span>
        </template>
        <template v-if="column.key === 'created_at' || column.key === 'updated_at'">
          {{ getTime(record[column.key]) }}
        </template>
      </template>
    </a-table>
    <a-modal v-model:open="open" title="修改密码" :confirm-loading="confirmLoading" @ok="changePassword" okText="确定"
      cancelText="取消">
      <a-row style="margin-bottom: 16px" :gutter="[16, 16]">
        <a-col style="display: flex;align-items: center;" :span="4">
          新密码：
        </a-col>
        <a-col :span="16">
          <a-input-password v-model:value="newPassword" placeholder="请输入新密码" />
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { computed, reactive, ref, onMounted } from "vue";
import moment from "moment";
import * as Api from "@req/api";
const open = ref(false);
const selectAccount = ref(null);
const newPassword = ref(null);
const confirmLoading = ref(false);
const total = ref(0);
const params = ref({
  start: 0,
  num: 10,
})
const pagination = computed(() => ({
  total: 200,
  current: params.value.start + 1,
  pageSize: params.value.num,
  total: total.value
}));
const columns = [
  {
    title: "账号名称",
    dataIndex: "account",
    key: "account",
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    key: "created_at",
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    key: "updated_at",
  },
  { title: "操作", dataIndex: "action", key: "action" },
];
const data = ref([]);
const showModal = (id) => {
  if (!id) {
    message.error('账号id获取失败，请稍后再试');
    return
  }
  open.value = true;
  selectAccount.value = id;
};
const changePassword = () => {
  if (selectAccount.value && newPassword.value) {
    confirmLoading.value = true;
    console.log(selectAccount.value, newPassword.value);


    const params = {
      manager_id: selectAccount.value,
      password: newPassword.value
    };

    Api.changePassword(params).then((res) => {
      if (res.code == 0) {
        message.success('修改密码成功');
        open.value = false;
        confirmLoading.value = false;
      } else {
        message.error(res.msg);
        confirmLoading.value = false;
      }
    })
  } else {
    if (!newPassword.value) {
      message.error('请输入新密码');
    }
  }
};

onMounted(() => {
  getList()
});

const getList = () => {
  Api.accountList(params.value).then((res) => {
    if (res.code == 0) {
      const arr = []
      res.data.manager_list.map((v, idx) => arr.push(v.manager))
      data.value = arr;
      total.value = res.data.join_total;
    }
  });
}

const getTime = (time) => {
  return moment(time * 1000).format("YYYY-MM-DD HH:mm");
};

const handleTableChange = (pagination) => {
  params.value.start = pagination.current - 1
  getList()
}
</script>

<style lang="postcss" scoped>
.namelist-box {
  padding: 16px;
}
</style>